<template>
    <div>
        <pagetitle></pagetitle>
        <el-card>
            <el-form :model="pageData" class="formbox" label-width="140px" :disabled="formDisabled" label-position="right">
                <div class="formboxitem">
                    <div class="title">基本信息</div>
                    <el-form-item label="正摄影像名称：">
                        <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入正摄影像名称"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商名称：">
                        <el-select v-model="pageData.value" class="inputs" placeholder="请选择平台供应商">
                            <el-option label="data" value="item.value" />
                        </el-select>
                        <span class="formTip">*从平台供应商中选择，非团队供应商会自动添加到供应商列表中。</span>
                    </el-form-item>
                    <el-form-item label="">
                        <span class="formTip"
                            >*参考标准：GB/T 4754-2017 国民经济行业分类：必须必备 科学研究和技术服务业/专业技术业务/遥感测绘服务 服务范围。</span
                        >
                    </el-form-item>
                </div>
                <div class="formboxitem">
                    <div class="title">
                        <span>地块信息</span>
                        <el-button type="primary" text bg @click="dialogVisible = true">添加</el-button>
                    </div>
                    <el-form-item label="地块信息：">
                        <el-table :data="[{}]" style="width: 100%" class="configurationtable">
                            <el-table-column label="序号"></el-table-column>
                            <el-table-column label="更新时间"></el-table-column>
                            <el-table-column label="土地资源名称"></el-table-column>
                            <el-table-column label="土地资源类型"></el-table-column>
                            <el-table-column label="电子围栏面积"></el-table-column>
                            <el-table-column label="地块位置"></el-table-column>
                            <el-table-column label="操作" width="120">
                                <template #default>
                                    <el-button type="primary" size="small" link>查看</el-button>
                                    <el-button type="primary" size="small" link>删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </div>

                <div class="formboxitem">
                    <div class="title">正摄影像要求</div>
                    <el-form-item label="完成截至时间：">
                        <el-date-picker v-model="pageData.value1" class="inputs" type="date" placeholder="请选择完成截至时间" />
                        <span class="formTip">*一般而言，要求完成时间越快，可能供应商要价更高，建议根据自己需要时间设置完成时间</span>
                    </el-form-item>
                    <el-form-item label="正摄影像大小：">
                        <el-select v-model="pageData.value" class="inputs" placeholder="请选择正摄影像大小">
                            <el-option label="data" value="item.value" />
                        </el-select>
                        <span class="formTip"
                            >*我们仅支持.tif文件；合成tif文件越大，分辨率越高，占用空间越大，加载时间越长，默认合成文件大小与电子围栏面积匹配</span
                        >
                    </el-form-item>
                </div>
                <div class="formboxitem">
                    <div class="title">正摄瓦片要求</div>
                    <el-form-item label="完成截至时间：">
                        <el-date-picker v-model="pageData.value1" class="inputs" type="date" placeholder="请选择完成截至时间" />
                        <span class="formTip">*一般而言，要求完成时间越快，可能供应商要价更高，建议根据自己需要时间设置完成时间</span>
                    </el-form-item>
                    <el-form-item label="正摄影像大小：">
                        <el-select v-model="pageData.value" class="inputs" placeholder="请选择正摄影像大小">
                            <el-option label="data" value="item.value" />
                        </el-select>
                        <span class="formTip"
                            >*我们仅支持 Global Mapper 18 软件合成瓦片图；一般从14级开始，合成到19、20、21级可选；文件大小ue成4倍递增，注意选择空间需求。</span
                        >
                    </el-form-item>
                    <el-form-item label="行政区域划分：">
                        <el-checkbox-group v-model="pageData.checkList">
                            <el-checkbox label="市级行政区划" />
                            <el-checkbox label="区县级行政区划" />
                            <el-checkbox label="乡镇级行政区划" />
                        </el-checkbox-group>
                        <span class="formTip" style="margin-left: 20px">*系统默认省级，可以添加要求相应级别；可以上传kml文件</span>
                    </el-form-item>
                </div>
                <div class="formboxitem">
                    <div class="formboxitemtitles">
                        <div class="title">正摄影像 <span>*尽量准确绘制边界，方便统计边界面积、员工考勤、园区安防进入边界等</span></div>
                        <div class="formboxitemtitlesRight">
                            <span>经度</span> <el-input v-model="pageData.input" class="formboxitemtitlesRightinput" placeholder="" /><span>纬度</span>
                            <el-input v-model="pageData.input" class="formboxitemtitlesRightinput" placeholder="" /><span>海拔</span>
                            <el-input v-model="pageData.input" class="formboxitemtitlesRightinput" placeholder="" />
                        </div>
                    </div>

                    <mars3d class="mars3ds"></mars3d>
                </div>
                <div class="formboxitem">
                    <el-button class="submitbtn" text bg>返回</el-button>
                    <el-button class="submitbtn" text bg>确定</el-button>
                </div>
            </el-form>
        </el-card>
        <el-dialog v-model="dialogVisible" title="添加地块信息" width="900">
            <div class="serchbox">
                <div class="left">
                    <div class="item">
                        <el-input v-model="input" class="serchs" placeholder="搜索土地资源">
                            <template #suffix>
                                <el-icon class="el-input__icon"><search /></el-icon>
                            </template>
                        </el-input>
                    </div>
                    <el-button type="primary" text bg>搜索</el-button>
                    <span>搜索范围包括：土地资源名称、客户名称、土地资源类型、位置等信息。</span>
                </div>
            </div>
            <el-table :data="[{}]" class="tableheader" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <!-- <el-table-column prop="date" label="选择"></el-table-column> -->
                <el-table-column prop="createTime" label="更新时间" />
                <el-table-column prop="companyName" label="土地资源名称" />
                <el-table-column prop="createUserName" label="客户名称" />
                <el-table-column prop="companyNature" label="土地资源类型" />
                <el-table-column prop="address" label="电子围栏面积">
                    <template #default="scope"> 暂无数据 </template>
                </el-table-column>
                <el-table-column prop="companyNature" label="地块位置" />
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
// import mars3d from "@/components/mars3d.vue";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import mars3d from "@/views/editorMap/index.vue";

// import { companyInfo } from "@/api/team";
const router = useRouter();
const route = useRoute();
const dialogVisible = ref(false);
const input = ref("");
const cardType = ref(["法人", "授权管理员"]);
const pageData: any = ref({});

console.log(route);
// 页面类型
const pageType = route.query;
const formDisabled = ref(false);
// 分页
const paginaClick = (val: number) => {
    // queryData.page = val;
    // getCompanyList(0);
};
// if (pageType.type == "1") {
//     // 从我的团队页面进入
//     formDisabled.value = false;
//     route.meta.title = "创建团队";
// } else if (pageType.type == "2") {
//     // 从加入团队页面搜索进入
//     formDisabled.value = true;
//     route.meta.title = "团队详情";
// } else if (pageType.type == "3") {
//     // 从加入团队页面我的邀请进入
//     formDisabled.value = false;
//     route.meta.title = "团队编辑";
// }
const uploadFiles = () => {};
</script>
<style scoped lang="scss">
.formboxitemtitles {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .title {
        span {
            font-size: 12px;
            color: #999999;
            font-weight: normal;
            margin-left: 10px;
        }
    }
    .formboxitemtitlesRight {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        span {
            font-size: 14px;
            font-weight: normal;
            color: #666666;
            margin-right: 10px;
            margin-left: 30px;
        }
        .formboxitemtitlesRightinput {
            width: 82px;
        }
    }
}
.formboxitem {
    .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
.serchbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .item {
            margin-right: 20px;
            color: #333333;
            font-size: 14px;
            .serchs {
                width: 200px;
            }
        }
        span {
            color: #999999;
            font-size: 14px;
            margin-left: 10px;
        }
    }
}
</style>
